<!-- 评审等级权重管理 -->
<template>
    <div>
        <el-dialog title="评审等级权重管理" :visible.sync="gradeDialog" width="90%" >
            <div class="table-container table-css">
                <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >            
                    <el-table-column prop="gradeName" label="标准等级" align="center" min-width="150"></el-table-column>
                    <el-table-column prop="gradeRange" label="评定分数" align="center" min-width="130"></el-table-column>
                    <el-table-column prop="remarks" label="标准等级说明" align="center" min-width="300"></el-table-column>
                    <el-table-column prop="gradeId" label="操作" align="center" min-width="100">
                        <template slot-scope="scope">
                            <span class="small-btn color-green" @click="edit(scope.row)">
                                <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 编辑
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="button-group">
            <div class="" @click="saveGrade">保存</div>
            <div class="" @click="gradeDialog=false">取消</div>
            </div>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="editDialog" width="60%" >
            <div class="my-form-container" style="height:auto;width:80%">
                <el-form ref="v" :model="addForm" class="demo-ruleForm">
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label" >评审指标项名称</div>
                            <div class="my-form-item-value"> {{addForm.itemName}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="24">
                        <div class="my-form-item-label">标准等级</div>
                        <el-form-item  prop="gradeName">
                            <div class="my-form-item-value">
                                <el-input class="width158" v-model="addForm.gradeName"></el-input>
                            </div>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="24">
                        <div class="my-form-item-label">评定分数</div>
                        <el-form-item  prop="gradeRange">
                            <div class="my-form-item-value">
                                <el-select style="width:228px;" v-model="addForm.gradeRange">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                    <!-- <el-option style="padding:0 15px">80-100分</el-option>
                                    <el-option style="padding:0 15px">60-80分</el-option>
                                    <el-option style="padding:0 15px">40-60分</el-option>
                                    <el-option style="padding:0 15px">0-40分</el-option> -->
                                </el-select>
                            </div>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item lastOne">
                        <el-col :span="24">
                        <div class="my-form-item-label">标准等级说明</div>
                        <el-form-item  prop="remarks">
                            <div class="my-form-item-value">
                                <el-input class="top10" type="textarea" v-model="addForm.remarks" :rows="2"></el-input>
                            </div>
                        </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div style="height:20px"></div>
            <div class="button-group">
                <div class="" @click="saveEdit">保存</div>
                <div class="" @click="editDialog=false">取消</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {psDJList,updatePsDJ} from "@/api/teachingTopic";

export default {
  data() {
    return {
      gradeDialog:false,
      editDialog:false,
       options: [{
          value: '80-100分',
          label: '80-100分'
        }, {
          value: '60-80分',
          label: '60-80分'
        }, {
          value: '40-60分',
          label: '40-60分'
        }, {
          value: '0-40分',
          label: '0-40分'
        }],
      addForm:{
        gradeId:'',// 等级id
        gradeName:'',//等级名称,
        gradeRange:'',//评定分数范围
        itemId:'',//指标项id
        itemName:'',//评审指标项名称
        remarks:'',//等级说明
      },
      tableData:[ ],
      ID:'',
      Name:''
    };
  },
  props:{
    ruleProps: {
      type: {},
      required: true
    }
    // ID:String,
    // name:String,
  },
watch: {
    ruleProps: {
      handler: function (val, old) {
          this.ID = val.itemID;
          this.Name = val.itemName
          this.initList()
      },
    }
  },
  mounted(){
  },
  methods: {
    async initList(){
        let res = await psDJList({itemId:this.ID})
        this.tableData = res.data
    },
    edit(row){
        this.addForm.itemName = this.Name;
        this.addForm.gradeId = row.gradeId;
        this.addForm.itemId = row.itemId;
        this.addForm.gradeName = row.gradeName;
        this.addForm.gradeRange = row.gradeRange;
        this.addForm.remarks = row.remarks;
        this.editDialog = true
    },
    async saveEdit(){
        let res = await updatePsDJ(this.addForm);
        if(res.code == 200){
            this.editDialog = false;
            this.initList()
        }
    },
    saveGrade(){
        this.editDialog = false
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin: 20px auto 60px;
  width: 85%;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.small-btn{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.lastOne{
    border:none;height:80px;
    /deep/.el-form-item__error {
        top:96%;
    }
    .top10{
        margin-top: 12px;
        width: 329px;
    }
    
}
.button-group{
    margin-top: 20px!important;
    padding-bottom: 90px!important;
}
.width158{width: 158px;}
</style>